<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="security"
	uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Market App</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<%-- <c:url var="findChannelURL" value="http://localhost:8080/MarketApp/register/channel" />
<c:url var="findCategoryChannelURL" value="http://localhost:8080/MarketApp/register/categories" />

<script type="text/javascript">
$(document).ready(
	function() {
		$.getJSON('${findChannelURL}', {
			ajax : 'true'
		}, function(data) {
			var html = '<option value="">Channel</option>';
			var len = data.length;
			for ( var i = 0; i < len; i++) {
				html += '<option value="' + data[i] + '">'
						+ data[i] + '</option>';
			}
			html += '</option>';
			$('#channelRef').html(html);
		});
	});
</script>
<script type="text/javascript">
$(document).ready(function() { 
	$('#channelRef').change(
		function() {
			$.getJSON('${findCategoryChannelURL}', {
				channelName : $(this).val(),
				ajax : 'true'
			}, function(data) {
				var html = '<option value="">Category</option>';
				var len = data.length;
				for ( var i = 0; i < len; i++) {
					html += '<option value="' + data[i] + '">'
							+ data[i] + '</option>';
				}
				html += '</option>';
 
				$('#categoryRef').html(html);
			});
		});
});
</script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#categoryRef").change(onSelectChange);
	});
 
	function onSelectChange() {
		var selected = $("#categoryRef option:selected");		
		var output = "";
		if(selected.val() != 0){
			output = "You selected category " + selected.text();
		}
		$("#result").val(output);
	}
</script> --%>
<script type="text/javascript">
	function verifyPassword(form) {
		var e = form.elements;
		if (e['password'].value != e['cnfPassword'].value) {
			alert('Your passwords do not match. Please type more carefully.');
			return false;
		}
		return true;
	}
</script>
</head>
<body>

	<h5>
		<fmt:message key="register_title" />
	</h5>
		<form:form method="post" modelAttribute="user"
			onsubmit="return verifyPassword(this);">
			<form:errors cssClass="error" />
			<table>
				<tr>
					<td>First name</td>
					<td><form:input path="userDetails.firstName" /> <form:errors
							path="userDetails.firstName" cssClass="error"></form:errors></td>

				</tr>
				<tr>
					<td>Middle name</td>
					<td><form:input path="userDetails.middleName" /> <form:errors
							path="userDetails.middleName" cssClass="error"></form:errors></td>
				</tr>
				<tr>
					<td>Surname</td>
					<td><form:input path="userDetails.lastName" /> <form:errors
							path="userDetails.lastName" cssClass="error"></form:errors></td>
				</tr>
				<tr>
					<td>Username</td>
					<td><form:input path="userName" /> <form:errors
							path="userName" cssClass="error"></form:errors></td>
				</tr>
				<tr>
					<td>Password</td>
					<td><form:password path="userPassword" id="password" /> <form:errors
							path="userPassword" cssClass="error"></form:errors></td>
				</tr>
				<tr>
					<td>Confirm Password</td>
					<td><input id="cnfPassword" type="password"></td>
				</tr>
				<%-- <tr>
				<td>Channel</td>
				<td><form:select id="channelRef" path="userName"></form:select></td>
			</tr>
			<tr>
				<td>Category</td>
				<td><form:select id="categoryRef" path="userPassword"></form:select></td>
			</tr>
			<tr>
				<td>Output</td>
				<td><input id="result" type="text" readonly="readonly"></td>
			</tr> --%>
			</table>
			<br class="clearfix">
			<div class="buttons">
				<button type="submit" class="positive" name="add">Register</button>
				<button type="reset" class="regular" name="reset">Reset</button>
			</div>
		</form:form>
</body>
</html>